<template>
  <div id="centerRight2">
    <chartBox title="“控”" :border="false">
      <div class="kpi_map chart_box_bg flex_center">
        <div class="img">
          <svgaVuePlayer
              :src="('/static/frames/kong.svga')"
              id="svgaplayer_kong"
          ></svgaVuePlayer>
        </div>
        <div class="kpi_list">
          <div class="kpi_item flex_center js-bt" v-for="(item,index) in titleList" :key="index">
            <div class="flex_center">
              <img class="icon_r" src="@/assets/img/icon/right_2_you.png" alt="">
              <div class="txt">{{ item.t }}</div>
            </div>
            <div class="num">{{ item.n }}</div>
          </div>
        </div>
      </div>
    </chartBox>
  </div>
</template>

<script>
import chartBox from '_c/chartBox.vue'
import svgaVuePlayer from '_c/svgaVuePlayer.vue'

export default {
  props: {
    apiData: {}
  },
  created() {
    // 生成 100 张图片的 URL 数组，图片命名格式：frame_001.png ~ frame_100.png
    for (let i = 0; i <= 99; i++) {
      let num = i.toString().padStart(3, '0')
      this.frameUrls.push(`/static/frames/kong/frame_${num}.png`)
    }
  },
  watch: {
    apiData: {
      handler(val) {
        if (!val) return
        this.dataFormat(val)
      },
      immediate: true,
      deep: true
    },
  },
  data() {
    return {
      titleList: [
        {
          t: '发案（刑事+治安）',
          n: 0
        }, {
          t: '110出警时间',
          n: 0
        }, {
          t: '校园打卡',
          n: 0
        }, {
          t: '交通事故警情',
          n: 0
        }, {
          t: '交通亡人事故警情',
          n: 0
        },
      ],
      frameUrls:[]
    }
  },
  components: {svgaVuePlayer, chartBox,},
  methods: {
    dataFormat(apiData) {
      const mapping = {
        '发案（刑事+治安）': 'faAnNum',
        '110出警时间': 'chuJingNum',
        '校园打卡': 'xiaoYuanDakaNum',
        '交通事故警情': 'jiaoTongNum',
        '交通亡人事故警情': 'jiaoTongWangRenNum'
      };
      // 1. 遍历 titleList，根据映射关系更新每个项的 n 值，并打上 updated 标记
      this.titleList.forEach(item => {
        const key = mapping[item.t];
        this.$set(item, 'n', apiData[key]);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
#centerRight2 {
  $box-width: 472px;
  $kpi-box-width: 200px;
  $font-family: PingFang SC, PingFang SC, sans-serif;

  .kpi_map {
    padding: 28px 24px;
    position: relative;
    .img{
      width: 537px;
      height: 428px;
      margin-right: 16px;
      position: absolute;
      left: -36px;
      top: 43%;
      transform: translateY(-50%);
    }
    .kpi_list{
      margin-left: 213px;
    }
    .kpi_item{
      padding: 8px 0;
      position: relative;
      width: $kpi-box-width;
      margin-bottom: 12px;
      &:nth-last-child(1){
        margin-bottom: 0;
      }
      .txt{
        font-family: $font-family;
        font-weight: 400;
        font-size: 14px;
        color: #B4D7EE;
        line-height: 14px;
        text-align: center;
      }
      .num{
        font-family:  $font-family;
        font-weight: 500;
        font-size: 16px;
        color: #16B3E0;
        line-height: 16px;
        text-align: right;
      }
      &:after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient( 179deg, #B4D7EE 0%, rgba(180,215,238,0) 100%);
        opacity: 0.6;
      }
      .icon_r{
        width: 8px;
        height: 6px;
        margin-right: 4px;
      }
    }
  }
}

</style>
